<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view>
			<u-empty text="暂无收藏" mode="favor" margin-top="300" :show="isZero"></u-empty>
		</view>
		<!-- 列表 -->
		<view v-if="!isZero">
			<uni-list>
				<uni-list-item clickable  @click="onClick($event,item.comId)" v-for="(item, index) in dataList" :key="item.comId">
					<template slot="header">
						<view class="header-image">
							<image class="slot-image" style="width: 200rpx;" :src="'http://localhost:8088'+item.imgUrl.split(',')[0]" mode="widthFix"></image>
						</view>
					</template>
					<template slot="body">
						<view class="body-content">
							<view class="title">
								{{item.comName}}
							</view>
							<view class="shop-money">
								<view class="shop-slod">¥<span>{{item.soldMoney}}</span></view>
								<view class="shop-orig">¥<span>{{item.oriMoney}}</span></view>
							</view>
							<view class="method">
								<view v-if="item.method == 0">以钱换物</view>
								<view v-if="item.method == 1">以物换物</view>
								<view v-if="item.method == 2">免费送</view>
							</view>
							<view class="nickname">
								{{item.nickName}}
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<u-loadmore :status="status" :margin-top="10" :margin-bottom="10"/>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() { 
			return {
				title: "我的收藏",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				isZero:true,
				status: 'loadmore',
				dataList:[],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					comName: null
				},
				pageTotal:0
			}
		},
		computed: {
			...mapGetters(['getUserInfo'])
		},
		onLoad() {
			this.selectMyCollect()
		},
		onShow() {
			this.selectMyCollect()
		},
		methods: {
			selectMyCollect(){
				this.queryParams.pageNum = 1;
				Vue.prototype.$u.api.selectMyCollectByUserId({
					pageNum:this.queryParams.pageNum,
					pageSize:this.queryParams.pageSize,
					userId: this.getUserInfo.userId
				}).then(res => {
					// console.log(res)
					if(res.total < this.queryParams.pageSize){
						this.status = 'nomore'
					}
					this.pageTotal = Math.ceil(res.total/this.queryParams.pageSize);
					if(res.code == 200 && res.rows.length > 0){
						this.dataList = res.rows
						this.isZero = false
					}else{
						this.isZero = true
					}
				})
			},
			onClick(event,comId){
				uni.navigateTo({
				    url: '/pages/detail/detail?comId='+comId
				});
			},
			onReachBottom() {
				this.status = 'loading';
				this.queryParams.pageNum = ++this.queryParams.pageNum;
				console.log(this.queryParams.pageNum)
				if(this.queryParams.pageNum <= this.pageTotal){
					setTimeout(()=>{
						Vue.prototype.$u.api.selectMyCollectByUserId({
							pageNum:this.queryParams.pageNum,
							pageSize:this.queryParams.pageSize,
							userId: this.getUserInfo.userId
						}).then(res => {
							if(res.code == 200 && res.rows.length > 0){
								this.dataList = this.dataList.concat(res.rows)
								this.status = 'loadmore';
							}else{
								this.status = 'nomore'
							}
						})
					},2000)
				}else {
					this.status = 'nomore'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.header-image{
		width: 200rpx;
		height: 200rpx;
	}
	
	.body-content{
		padding: 5rpx 18rpx;
	}
	.title {
		font-weight: bold;
		font-size: 26rpx;
		height: 75rpx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.shop-money {
		display: inline-flex;
	}
	
	.shop-slod {
		font-size: 26rpx;
		margin: 8rpx 0rpx;
		color: red;
		font-weight: bold;
	}
	
	.shop-slod>span {
		font-size: 36rpx;
	}
	
	.shop-orig {
		font-size: 26rpx;
		margin: 16rpx 20rpx;
		color: gray;
		text-decoration: line-through;
	}
	.method {
		background-color: #dfdfdf;
		display: inline-block;
		padding: 8rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-left: 50rpx;
	}
	.nickname{
		font-size: 26rpx;
		color: gray;
	}
</style>
